<!-- pages/ProductList.vue -->
<template>
  <el-row :gutter="10">
  <el-col :span="6"
    ><div class="grid-content bg-purple"></div
  ></el-col>
  <el-col :span="6"
    ><div class="grid-content bg-purple-light"></div
  ></el-col>
  <el-col :span="6"
    ><div class="grid-content bg-purple"></div
  ></el-col>
  <el-col :span="6"
    ><div class="grid-content bg-purple-light"></div
  ></el-col>
  <el-col :span="6"
    ><div class="grid-content bg-purple-light"></div
  ></el-col>
</el-row>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import ResponsiveGrid from './components/ResponsiveGrid.vue'

interface Product {
  id: number
  name: string
  price: number
 
}



const gridLayoutRef = ref<InstanceType<typeof ResponsiveGrid> | null>(null)
const currentPage = ref(1)
const allProducts = ref<Product[]>([])

// 模拟产品数据
const generateProducts = (count: number): Product[] => {
  return Array.from({ length: count }, (_, i) => ({
    id: i + 1,
    name: `产品 ${i + 1}`,
    price: Math.floor(Math.random() * 1000) + 100,
  }))
}







// 监听页面大小变化，重置到第一页
watch(() => gridLayoutRef.value?.pageSize, () => {
  currentPage.value = 1
})

onMounted(async () => {
  // 模拟获取数据
  allProducts.value = generateProducts(100)
})
</script>

<style scoped>
  .el-col {
    border-radius: 4px;
    margin-bottom: 10px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
</style>